<div class="grid grid-cols-5 gap-1 md:gap-6">
  @for (page of lists; track page.nid) {
    <div
      class="col-span-5 md:col-span-1 overflow-hidden item flex flex-col gap-2 relative mb-5 group"
    >
      <div
        class="relative rounded-md shadow-md overflow-hidden border border-solid border-neutral-200"
      >
        <img
          class="aspect-[16/9] w-full object-cover"
          src="{{ page.cover || params.defaultImg }}"
          alt=""
        />
        <div class="actions absolute left-1/2 top-1/2 group-hover:block hidden">
          <app-btn
            class="block"
            [matMenuTriggerFor]="menu"
            [content]="{
              label: '编辑',
              mode: 'raised',
              color: 'primary',
            }"
          />
          <mat-menu #menu="matMenu" class="overlay-btn-icon">
            <button mat-menu-item (click)="loadPage(page)">
              <app-icon [content]="{ svg: 'pencil' }" />
              <span>载入编辑</span>
            </button>
            @if (langs) {
              @for (item of langs; track $index) {
                @if (!item.default && item.langCode !== page.langcode) {
                  <button mat-menu-item (click)="createLangVersion(page, item.langCode)">
                    <app-icon [content]="{ svg: 'translate' }" />
                    <span>编辑{{ item.label }}</span>
                  </button>
                }
              }
            }
            <button mat-menu-item (click)="updatePage(page)">
              <app-icon [content]="{ svg: 'cog' }" />
              <span>页面属性</span>
            </button>
          </mat-menu>
        </div>
      </div>
      <div class="text inline-flex items-start gap-1 group flex-[1_1_auto]">
        <span
          class="title line-clamp-2 font-bold"
          (blur)="onTitle($event, page)"
          contenteditable="false"
        >
          {{ page.title }}
        </span>
        <app-icon
          (click)="enableEditor($event)"
          class="group-hover:!inline-block !hidden w-[16px] h-[16px] cursor-pointer"
          [content]="{ svg: 'pencil-outline', inline: true }"
        />
      </div>
      <div class="meta text-sm font-mono">
        {{ page.author | shorten: 6 : '**' }}
        <div class="flex justify-between mt-2">
          <a
            class="truncate !text-neutral-500"
            href="{{ page.url }}?preview=true"
            target="_blank"
            >{{ page.url }}</a
          >
          <span class="whitespace-nowrap text-neutral-500">{{
            page.changed | date: 'yyyy/MM/dd HH:mm'
          }}</span>
        </div>
      </div>
    </div>
  }
</div>
